<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <head th:replace="common/common_css :: css(~{::link})">
    </head>
    <title>主页</title>
    <link th:href="@{/css/mcss/mcss_userInfo.css}" rel="stylesheet">
    <link type="text/css" rel="stylesheet" th:href="@{/css/preloader.css}">
    <link th:href="@{/xtiper/css/xtiper.css}" type="text/css" rel="stylesheet"/>
    <script th:src="@{/xtiper/js/xtiper.js}" type="text/javascript"></script>
</head>
<body>

<div id="preloader">
    <div id="preloader-inner"></div>
</div>

<div id="wrapper">
    <div th:replace="common/common_left :: left"></div>

    <div id="content-wrapper" class="d-flex flex-column content-wrapper">
        <div id="content">
            <div th:replace="common/common_head :: head"></div>

            <!--正文-->

            <div>
                <div class="card shadow mb-4" style="margin-left: 20%;margin-right: 20%">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">个人资料</h6>
                    </div>
                    <div class="card-body">
                        <div style=" margin-left: 25%;margin-right: 10%;">
                            <form id="update-form" class="am-form am-form-horizontal">
                                <!--隐藏输入框-->
                                <input type="hidden" name="id" th:value="${user.id}">

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">昵称</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" name="username" th:value="${user.username}">
                                    </div>
                                </div>


                             <div class="form-group">
                                    <label  class="col-sm-2 control-label">性别</label>
                                    <div class="col-sm-10">
                                        <select class="form-control" name="sex"  th:value="${user.sex}">
                                            <option th:text="${user.sex}" ></option>
                                            <option th:if="${user.sex} ne '男'">男</option>
                                            <option th:if="${user.sex} ne '女'">女</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">生日</label>
                                    <div class="col-sm-10">
                                        <input type="date" class="form-control" name="birthday" th:value="${user.birthday}">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">政治面貌</label>
                                    <div class="col-sm-10">
                                        <select class="form-control" name="politicalStatus"  th:value="${user.politicalStatus}">
                                            <option th:text="${user.politicalStatus}" ></option>
                                            <!--如果身份是群众则通过判断显示群众-->
                                            <option th:if="${user.politicalStatus} ne '群众'">群众</option>
                                            <option th:if="${user.politicalStatus} ne '团员'">团员</option>
                                            <option th:if="${user.politicalStatus} ne '党员'">党员</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">电话号码</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" name="phone" id="phone" th:value="${user.phone}">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label  class="col-sm-2 control-label">通讯地址</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" name="address" th:value="${user.address}">
                                    </div>
                                </div>

                                <div style="margin-left: 72%;margin-top: 20px">

                                    <button class="btn btn-primary btn-lg" id="updateInfo" onclick="changeUserInfo()">修改
                                    </button>

                                </div>
                            </form>    </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>

<div>
    <div th:replace="common/common_js :: js(~{::script})"></div>
    <script type="text/javascript" th:src="@{/js/jquery.preloader.min.js}"></script>
    <script th:src="@{/sb-admin-2/bootstrap/bootstrap-table.min.js}"></script>
    <script th:src="@{/sb-admin-2/bootstrap/bootstrap-table-zh-CN.js}"></script>
    <script type="text/javascript" th:src="@{/js/mjs/mjs_userInfo.js}"></script>
</div>
</body>
<script>
    function changeUserInfo() {
       var data=$("#update-form").serialize();
       var url="/admin/updateUserInfo";
        $.post(url,data,function (data) {
            if(data.state==200){
                alert(data.message);
                /*xtip.msg(data.message, {icon: 's'});*/
                location.reload();
                }else {
                alert(data.message);
                /*xtip.msg(data.message, {icon: 'e'});*/
                location.reload();
                }
            },"json");
    }

    $("#phone").blur(function () {
        //获取输入密码
        var  phone= $("#phone").val();
        $.post("/admin/checkPhone", {"phone": phone}, function (data) {
            if(data.state==200){
                xtip.msg(data.message, {icon: 's'});
            }else {
                xtip.msg(data.message, {icon: 'e'});
            }
        });
    });
</script>
</html>